{% extends 'images/images_base.html' %}

{% block title %} Update {% endblock title %}

{% block content %}
    <div class="update-main">
        <img src="{{ image.image.url }}">
        <form action="{% url 'images:update_image' slug=image.slug %}" method="post">
            {% csrf_token %}
            <div class="update-fields">
                {% for field in form %}
                    <div class="update-label">
                        {{ field.label }}
                    </div>
                    {{ field }}
                {% endfor %}
            </div>
            <button type="submit" class="btn btn-secondary">Update</button>
        </form>
    </div>

    <style>
        div.update-main button {
            margin-top: 1em;
        }

        div.update-label {
            margin-top: 0.5em;
        }

        div.update-fields {
            display: flex;
            flex-direction: column;
        }

        div.update-main img {
            width: 25em;
            height: 20em;
            margin-right: 2em;
            margin-left: 2em;
            border-radius: 8px;
            border: 1px solid #DDD;
        }

        div.update-main {
            display: flex;
        }

        .update-main input {
            background: rgb(28, 30, 33);
            box-shadow: inset -100px -100px 0 rgb(28, 30, 33); /*Prevent yellow autofill color*/
            color: rgb(52, 56, 61);
            border-radius: .25rem;
            padding: 10px;
            margin-bottom: 5px;           
        }

        input[type="text"]:focus {
            color: rgb(255, 255, 255);
        }


    </style>
{% endblock content %}
